<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box">
        <input type="button" @click="fn" value="按钮">
        <input type="button" @click="foo('abc', $event, 123)" value="按钮">
        <span>{{title}}</span>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>

    const app = Vue.createApp({
        data(){
            return {
                title:"hello event"
            }
        },
        methods:{
            fn(e){
                // 当绑定事件时的事件处理函数没有小括号时，默认第一个参数是事件对象
                this.title = "hello Event" + Date.now();
                console.log(e);
                console.log(e.target);
            },
            foo(m, e, n){
                // 当绑定事件时的事件处理函数有小括号时，需要主动传入一个$event的变量，是一个参数正常接收，作为事件对象使用
                console.log(m);
                console.log(e);
                console.log(n);
            }
        }
    })
    app.mount(".box");

</script>
</html>